<!--每日签到领取宝箱-->
<template>
	<view :class="hdc">

		<view class="qdtop bj_between">
			<view class="poa lt0 w100 h100" style="background: #0F194D;" v-if="show">

			</view>
			<view class="qdtop-lrbox bj_left por" @click="repage">
				<image src="/static/prev.png" class="qdtop-lrbox-prevpic" mode="widthFix"></image>
			</view>
			<view class="por">
				{{$t("qd.tit")}}
			</view>
			<view class="qdtop-lrbox por">

			</view>
		</view>
		<!--主体-->
		<view class="qdmain">
			<image src="/static/qd/qd.jpg" class="qdmain-banner"></image>
			<view class="qdmain-box">

				<view class="qdmain-box-topbox">

					<view class="bj_between mb20">
						<view class="f22">
							<text>{{$t("qd.txt1")}}</text>
							<text class="cy">{{$t("menu.$")}}{{detail.next_checkin_bonus?.need_gold||0}}</text>
							<text>{{$t("qd.txt2")}}{{$t("menu.$")}}{{detail.next_checkin_bonus?.bonus||0}}</text>
						</view>
						<view class="qdmain-box-topbox-btnbox bj_between">
							<view class="cy f26">
								{{coins}}
							</view>
							<view class="qdmain-box-topbox-btnbox-btn bj_center" :class="{can:withdraw}" @click="txcz">
								{{$t("qd.btn1")}}
							</view>
						</view>
					</view>
					<view class="qdmain-box-jdtbox">
						<view class="qdmain-box-jdtbox-kt">
							<view class="qdmain-box-jdtbox-kt-mt" :style="{width:jdbbfb}">

							</view>
						</view>

						<view class="qdmain-box-jdtbox-bxinfo bj_sx" :style="'left:'+(item.n / yblist[yblist.length-1].n*100)+'%'"
							v-for="(item,index) in yblist" :key="index">
							<view class="qdmain-box-jdtbox-bxinfo-bxydd" :class="{'mgl-50':yblist.length-1!=index}">

							</view>
							<view class="bj_center" :class="{'mgl-50':yblist.length-1!=index}">
								<image v-if="coins>=item.n" src="/static/qd/jb.png" class="qdmain-box-jdtbox-bxinfo-yb"></image>
								<image v-else src="/static/qd/yb.png" class="qdmain-box-jdtbox-bxinfo-yb"></image>
								<text>{{item.n}}</text>
							</view>
						</view>
					</view>

				</view>
				<view class="qdmain-box-bxlist">
					<view class="qdmain-box-bxlist-tit f32 fwb tc">
						{{$t("qd.tit2")}}
					</view>
					<view class="qdmain-box-bxlist-box">
						<view class="qdmain-box-bxlist-item" v-for="(item , i) in bxList" :key="i" @click="opbx(item)">
							<view class="qdmain-box-bxlist-item-itemtit bj_center">
								DAY{{item.day}}
							</view>
							<view class="qdmain-box-bxlist-item-itemmain bj_center">
								<image src="/static/qd/sg.png" class="qdmain-box-bxlist-item-itemmain-sg"></image>
								<view class="qdmain-box-bxlist-item-itemmain-bxpic bj_center">
									<image src="/static/qd/bxd.png" class=""></image>
								</view>
							</view>
							<view class="qdmain-box-bxlist-item-gc bj_center" v-if="item.day<=detail.user?.checkin_days">
								<image src="/static/qd/gg.png" mode=""></image>
							</view>
						</view>
					</view>
					<view class="qdmain-box-abtnbox bj_center">
						<view class="qdmain-box-abtnbox-btn bj_center f36 fwb" @click="getbx">
							<text>{{$t("qd.btn2")}}</text>
							<image src="/static/qd/bx.png"></image>
							<text>X{{treasureNum}}</text>
						</view>
					</view>
				</view>

			</view>

			<view class="qdmain-infolist">
				<view class="qdmain-infolist-box">
					<view class="qdmain-infolist-box-chbox">
						<view class="qdmain-infolist-box-chbox-l bj_center"
							:class="nows == 1 ? 'qdmain-infolist-box-chbox-lo' : ''" @click="chs(1)">
							{{$t("qd.tab1")}}
						</view>
						<view class="qdmain-infolist-box-chbox-r bj_sx"
							:class="nows == 2 ? 'qdmain-infolist-box-chbox-ro' : ''" @click="chs(2)">
							<view class="">
								{{$t("qd.tab2")}}
							</view>
							<view class="bj_center f24">
								<image src="/static/qd/time.png"></image>
								<text>{{countdown}}</text>
							</view>
						</view>
					</view>

					<view class="qdmain-infolist-box-item" v-for="(item,index) in czList" :key="index">
						<view class="mb20">
							<text>Carregar um total de {{$t("menu.$")}}{{item.recharge}}</text>
							<text class="cy">({{Number(detail.user?.recharge_all||0)}}/{{item.recharge}})</text>
						</view>
						<view class="bj_between">
							<view class="bj_left">
								<image src="/static/qd/bx.png"></image>
								<text>{{item.treasure}}</text>
								<image src="/static/qd/jb2.png" style="margin-left: 40rpx;"></image>
								<text>{{item.gold}}</text>
							</view>
							<view class="qdmain-infolist-box-item-btn" :class="{dis:item.is_finished==1&&item.is_received==1}" @click="tocz(item)">
								{{$t("qd.btn3")}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>

		<!--盖层-->
		<view class="qdtop-gc bj_center" v-if="showgc">

			<!--宝箱-->
			<view class="qdtop-gc-sgbox" v-if="showbx">
				<image src="/static/qd/sg.png" class="bxsg"></image>
				<view class="qdtop-gc-sgbox-bxbox bj_center">
					<image src="/static/qd/bxd.png" class="bxzz" mode=""></image>
				</view>
			</view>
			<!--弹窗-->
			<view class="" v-if="showtc">
				<view class="qdtop-gc-tct bj_between">
					<view class="qdtop-gc-tct-xbox">

					</view>
					<view class="f36">
						{{$t("qd.tit3")}}
					</view>
					<image src="/static/xx.png" class="qdtop-gc-tct-xbox"></image>
				</view>
				<view class="qdtop-gc-tcm bj_sx">
					<view class="f26 mb30">
						{{$t("qd.tit4")}}
					</view>
					<image class="mb30" src="/static/qd/jbb.png" style="width: 132rpx;" mode="widthFix"></image>
					<view class="qdtop-gc-tcm-qb mb50">
						1.76{{$t("menu.$")}}
					</view>
					<view class="qdmain-infolist-box-item w100 mb40">
						<view class="mb20">
							<text>Carregar um total de R$500</text>
							<text class="cy">(0/500)</text>
						</view>
						<view class="bj_between">
							<view class="bj_left">
								<image src="/static/qd/bx.png"></image>
								<text>3</text>
								<image src="/static/qd/jb2.png" style="margin-left: 40rpx;"></image>
								<text>3</text>
							</view>
							<view class="qdmain-infolist-box-item-btn" @click="tocz">
								{{$t("qd.btn3")}}
							</view>
						</view>
					</view>
					<view class="qdtop-gc-tcm-btn">
						{{$t("qd.btn5")}}
					</view>

				</view>
			</view>
			
			<!-- 加宝箱和金币 -->
			<view class="dh_1" v-if="showlj">
				<view class="qdtop-gc-tct bj_between">
					<view class="qdtop-gc-tct-xbox">
				
					</view>
					<view class="f36">
						{{$t("qd.tit5")}}
					</view>
					<image src="/static/xx.png" class="qdtop-gc-tct-xbox" @click="ljclose"></image>
				</view>
				
				
				<view class="qdtop-gc-tcm bj_sx">
					<view class="f26 mb30">
						{{$t("qd.tit6")}}{{$t("menu.$")}}{{czdData.recharge}}({{Number(detail.user?.recharge_all||0)}}/{{czdData.recharge}})
					</view>
					<view class="qdtop-gc-jia">
						<view class="qdtop-gc-jia-box">
							<image class="mb30" src="/static/qd/bx.png" style="width: 176rpx;" mode="widthFix"></image>
							<view class="qdtop-gc-jia-box-txt mb50">
								+{{czdData.treasure}}
							</view>
						</view>
						
						<image class="mb30" src="/static/j.png" style="width: 48rpx;margin: 0 80rpx;" mode="widthFix"></image>
						<view class="qdtop-gc-jia-box">
							<image class="mb30" src="/static/qd/jbb.png" style="width: 176rpx;" mode="widthFix"></image>
							<view class="qdtop-gc-jia-box-txt mb50">
								+{{czdData.gold}}
							</view>
						</view>
					</view>
					

					
					<view class="qdtop-gc-tcm-btn" @click="ljconfirm">
						{{$t("qd.btn3")}}
					</view>
				
				</view>
				
				
			</view>

		</view>


		<zero-loading type="surround" v-if="loading"></zero-loading>
	</view>

</template>

<script setup>
	import {
		ref,
		inject,
		provide,
		computed
	} from 'vue';
	import useI18n from '@/store/useI18n.js'
	import common from '../../js/common';
	import {
		onPageScroll,
		onShow
	} from '@dcloudio/uni-app'
	const {
		t
	} = useI18n()

	let nows = ref("1")
	let show = ref(false)
	let hdc = ref("hdpagein")

	let showgc = ref(false)
	let showbx = ref(false)
	let showtc = ref(false)
	let showlj = ref(false)
	// 加载
	const loading=ref(false)

	

	let yblist = ref([])
	
	// 初始化获取到的数据
	const detail=ref({})
	// 倒计时
	const countdown=ref('')
	// 宝箱列表
	const bxList=ref([])
	
	// 可打开的宝箱数量
	const treasureNum=ref(0)

	var timer = null
	// 拥有的金币数
	const coins=ref(0)
	// 充值奖励列表
	const czList=ref([])
	// 充值奖励领取对象
	const czdData=ref({})

	
	// 是否可以提金币
	const withdraw=ref(false)
	
	function chs(v) {
		if(nows.value != v){
			nows.value = v
			// 切换列表
			if(v==1){
				czList.value=detail.value.recharge_config
			}else if(v==2){
				czList.value=detail.value.period_recharge_config
			}
		}
		
	}
	
	// 进度百分比
	const jdbbfb=computed(()=>{
		let list=yblist.value
		let a=list[list.length-1]?.n||0
		let f=Number(coins.value) 
		let b=a==0?0:f/a
		let c=b*100>100?100:b*100
		let d=c+'%'
		return d
	})
	
	// 倒计时
	function startCountdown(totalSeconds) {
	  let remaining = totalSeconds;
	  
	   timer = setInterval(() => {
	    if (remaining <= 0) {
	      clearInterval(timer);
	      console.log("00:00:00");
	      return;
	    }
	
	    const hours = Math.floor(remaining / 3600);
	    const minutes = Math.floor((remaining % 3600) / 60);
	    const seconds = remaining % 60;
		
		const formattedTime = String(hours).padStart(2, '0')+'h'+String(minutes).padStart(2, '0')+'m'+String(seconds).padStart(2, '0')+'s'
		countdown.value=formattedTime
		
	    remaining--;
	  }, 1000);
	}

	onPageScroll(e => {
		if (e.scrollTop > 50) {
			show.value = true
		} else {
			show.value = false
		}
	})

	function repage() {
		hdc.value = "hdpageout"
		uni.navigateBack()
	}

	// 去充值
	function tocz(item) {
		if(item.is_finished==1&&item.is_received==0){
			// 领取
			czdData.value={
				...item
			}
			showgc.value=true
			showlj.value=true
			
		}else if(item.is_finished==0&&item.is_received==0){
			// 充值
			uni.navigateTo({
				url: "/pages/index/tx"
			})
		}
		
	}
	
	function ljconfirm(){
		ljclose()
		loading.value=true
		common.getCheckinRechargeBonus().then(res=>{
			if(res.data.success){
				init()
			}else{
				loading.value=false
			}
		})
	}
	
	// 关闭充值领奖弹窗
	function ljclose(){
		showgc.value=false
		showlj.value=false
	}
	

	

// 点击宝箱（目前没限制，需要加）
	function opbx() {
		showgc.value=true
		showbx.value=true
		
		setTimeout(()=>{
			showgc.value=false
			showbx.value=false
		},2000)

		common.checkin().then(res=>{
			if(res.data.success){
				init()
			}
		})

	}
	
	// 领取宝箱奖励
	function getbx(){
		if(treasureNum.value<=0){
			return
		}
		loading.value=true
		common.openTreasure().then(res=>{
			if(res.data.success){
				treasureNum.value=0
				init()
			}
		})
	}
	
	// 提取金币
	function txcz(){
		if(!withdraw.value){
			return
		}
		common.getGoldBonus().then(res=>{
			if(res.data.success){
				init()
			}
		})
	}

// 初始化数据
	function init() {
		if(!!timer){
			clearInterval(timer);
		}
		loading.value=true
		common.checkinInit().then(res => {
			detail.value=res.data.data||{}
			
			const {checkin_bonus,period_end_time,checkin_config,user,recharge_config}=detail.value
			
			yblist.value=checkin_bonus.map(m=>{
				return {
					n:Number(m.bonus),
					ch:m.status==1
				}
			})
			
			
			startCountdown(period_end_time)
			
			bxList.value=checkin_config||[]
			
			treasureNum.value=user.checkin_treasure||0
			
			coins.value=Number(user.checkin_gold)
			
			czList.value=recharge_config
			
			withdraw.value=yblist.value.some(n=>Number(n.n)<=Number(coins.value)&&!n.ch)		
			
			loading.value=false
		})
	}
	
	onShow(() => {
		init()
	})
</script>

<style lang="scss">
	.qdtop {
		height: 88rpx;
		padding: 0 26rpx;
		position: sticky;
		left: 0;
		top: 0;
		width: 100%;
		z-index: 2;

		&-gc {
			position: fixed;
			width: 100%;
			height: 100%;
			left: 0;
			top: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 99;
			padding-bottom: 50%;
			
			&-jia{
				display: flex;
				align-items: center;
				
				&-box{
					display: flex;
					flex-direction: column;
					align-items: center;
					
					&-txt {
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						background: #003311;
						border-radius: 30rpx;
						font-size: 30rpx;
						color: #fff;
						text-align: center;
					}
				}
			}

			&-tct {
				width: 698rpx;
				height: 112rpx;
				font-size: 36rpx;
				background: linear-gradient(180deg, #50B6E9 0%, #186AD8 100%);
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				padding: 0 30rpx;

				&-xbox {
					width: 40rpx;
					height: 40rpx;
				}
			}

			&-tcm {
				width: 698rpx;
				background: linear-gradient(180deg, #1E3298 0%, #1C6882 100%);
				border-radius: 0 0 20rpx 20rpx;
				padding: 30rpx 38rpx 50rpx;

				&-qb {
					width: 320rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #003311;
					border-radius: 100rpx;
					font-size: 48rpx;
					color: #FFBE32;
					text-align: center;
				}
				
				

				&-btn {
					width: 320rpx;
					height: 88rpx;
					line-height: 88rpx;
					background: #F8C735;
					color: #704406;
					font-size: 40rpx;
					text-align: center;
					border-radius: 100rpx;
				}
			}

			&-sgbox {
				width: 404rpx;
				height: 404rpx;
				position: relative;

				&-bxbox {
					width: 100%;
					height: 100%;
					position: absolute;
					left: 0;
					top: 0;
				}
			}
		}

		&-lrbox {
			width: 20%;
			height: 100%;

			&-prevpic {
				width: 30rpx;
			}
		}
	}

	.qdmain {
		&-banner {
			width: 100%;
			height: 296rpx;
			position: absolute;
			left: 0;
			top: 0;
		}

		&-box {
			position: relative;
			padding-top: 170rpx;
			z-index: 1;

			&-topbox {
				height: 164rpx;
				border-radius: 20rpx 20rpx 0rpx 0rpx;
				background: linear-gradient(90deg, #0E4642 0%, #006221 100%);
				padding: 28rpx 28rpx 0;

				&-btnbox {
					width: 236rpx;
					height: 48rpx;
					border-radius: 100rpx;
					padding-left: 50rpx;
					background: url("/static/qd/jb.png") #003311 no-repeat 10rpx center;
					background-size: 32rpx 32rpx;

					&-btn {
						font-size: 22rpx;
						width: 96rpx;
						height: 44rpx;
						background: #86889D;
						border-radius: 100rpx 100rpx 100rpx 100rpx;
					}
				}
			}

			&-jdtbox {
				position: relative;
				padding-top: 6rpx;

				&-kt {
					height: 16rpx;
					background: #003311;
					border-radius: 100rpx;
					position: relative;

					&-mt {
						left: 0;
						top: 0;
						min-width: 16rpx;
						height: 16rpx;
						background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
						border-radius: 100rpx;
					}
				}

				&-bxinfo {
					position: absolute;
					top: 0;
					font-size: 22rpx;

					&-bxydd {
						width: 28rpx;
						height: 28rpx;
						background: #003311;
						border-radius: 100rpx;
						border: 2rpx solid #03A038;
						margin-bottom: 6rpx;
					}

					&-yb {
						width: 24rpx;
						height: 24rpx;
					}
				}

				&-bxinfo:last-child {
					left: auto !important;
					right: -20rpx !important;
				}
			}

			&-bxlist {
				background: #003311;
				padding-top: 30rpx;
				padding-bottom: 8rpx;

				&-tit {
					padding-bottom: 10rpx;
				}

				&-box {
					height: 428rpx;
					overflow-y: auto;
					padding: 0 24rpx;
				}

				&-item {
					float: left;
					width: 160rpx;
					height: 184rpx;
					margin-bottom: 20rpx;
					margin-right: 20rpx;
					background: #003311;
					border-radius: 20rpx;
					border: 2rpx solid #0B7637;
					position: relative;

					&-itemtit {
						width: 160rpx;
						height: 48rpx;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						background: linear-gradient( 180deg, #007628 0%, #177747 100%);
						font-size: 32rpx;
						font-weight: bold;
					}

					&-itemmain {
						height: 135rpx;
						position: relative;

						&-sg {
							width: 128rpx;
							height: 128rpx;
						}

						&-bxpic {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;

							image {
								width: 88rpx;
								height: 88rpx;
							}
						}
					}

					&-gc {
						background: rgba(0, 0, 0, 0.5);
						border-radius: 20rpx;
						width: 100%;
						height: 100%;
						left: 0;
						top: 0;
						position: absolute;

						image {
							width: 60rpx;
							height: 60rpx;
						}
					}
				}

				&-item:nth-child(4n+4) {
					margin-right: 0;
				}
			}

			&-abtnbox {
				padding: 20rpx 0;

				&-btn {
					width: 460rpx;
					height: 76rpx;
					background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
					border-radius: 100rpx;

					image {
						width: 60rpx;
						height: 60rpx;
						margin: 0 16rpx;
					}
				}
			}
		}

		&-infolist {
			padding: 20rpx 20rpx 118rpx;

			&-box {
				background: #00561D;
				border-radius: 20rpx;
				padding: 22rpx 20rpx;

				&-chbox {
					height: 92rpx;
					position: relative;
					font-size: 36rpx;
					margin-bottom: 20rpx;
					color: #A2B5D5;

					&-l {
						position: absolute;
						left: 0;
						top: 0;
						width: 352rpx;
						height: 92rpx;
						background: url("/static/s1.png") no-repeat center center;
						background-size: 100% 100%;
					}

					&-lo {
						color: #fff;
						background: url("/static/s1o.png") no-repeat center center;
						background-size: 100% 100%;
					}

					&-r {
						position: absolute;
						top: 0;
						right: 0;
						width: 352rpx;
						height: 92rpx;
						background: url("/static/s2.png") no-repeat center center;
						background-size: 100% 100%;

						image {
							width: 32rpx;
							height: 32rpx;
						}
					}

					&-ro {
						color: #fff;
						background: url("/static/s2o.png") no-repeat center center;
						background-size: 100% 100%;
					}
				}

				&-item {
					background: #003311;
					border-radius: 20rpx;
					padding: 24rpx;
					font-size: 24rpx;
					margin-bottom: 20rpx;

					image {
						width: 48rpx;
						height: 48rpx;
						margin-right: 10rpx;
					}

					&-btn {
						width: 174rpx;
						height: 56rpx;
						line-height: 56rpx;
						text-align: center;
						font-size: 26rpx;
						background: linear-gradient( 180deg, #00802B 0%, #06C045 100%);
						border-radius: 100rpx 100rpx 100rpx 100rpx;
					}
				}
			}
		}

	}

	.bxsg {
		width: 404rpx;
		height: 404rpx;
		animation: bxsgd 2s linear infinite;
	}

	@keyframes bxsgd {
		0% {
			transform: rotate(0deg) scale(0.6);
			opacity: 0.6;
		}

		50% {
			transform: rotate(180deg) scale(1);
			opacity: 1;
		}

		100% {
			transform: rotate(360deg) scale(0.6);
			opacity: 0.6;
		}
	}

	.bxdk {
		width: 278rpx;
		height: 278rpx;
		animation: bxdkd 1s 1 linear;
		animation-fill-mode: forwards;
	}

	@keyframes bxdkd {

		0% {
			transform: scale(0);
			opacity: 0;
		}


		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	.bxzz {
		width: 278rpx;
		height: 278rpx;
		animation: bxzzd 0.5s 4 linear;
	}
	
	.can{
		background: linear-gradient(180deg, #50B6E9 0%, #105FD6 100%) !important;
	}
	
	.dis{
		background: #86889D !important;
	}

	@keyframes bxzzd {

		0%,
		100% {
			transform: rotate(0deg);
		}

		25% {
			transform: rotate(-10deg);
		}

		50% {
			transform: rotate(10deg);
		}

		75% {
			transform: rotate(-10deg);
		}
	}
	
	.mgl-50{
		margin-left: -50%;
	}
</style>